<template>
  <div>
    <div style="text-align: center">
      <img :src="avatarURL" style="border-radius: 50%" width="120px">
      <el-button type="text" @click="editAvatar">修改头像</el-button>
    </div>

    <el-dialog :visible.sync="editAvatarDialog" title="修改头像" width="40%">
      <el-row justify="center" type="flex">
        <div class="cropper">
          <vueCropper
              ref="cropper"
              :autoCrop="option.autoCrop"
              :autoCropHeight="option.autoCropHeight"
              :autoCropWidth="option.autoCropWidth"
              :canMove="option.canMove"
              :canMoveBox="option.canMoveBox"
              :fixedBox="option.fixedBox"
              :full="option.full"
              :img="option.img"
              :info="option.info"
              :original="option.original"
              :outputSize="option.size"
              :outputType="option.outputType"
              @realTime="realTime"
          ></vueCropper>
        </div>
        <div class="previewBox">
          <div :style="previews.div" class="preview">
            <img :src="previews.url" :style="previews.img">
          </div>
          <el-row justify="center" type="flex">
            <el-upload
                :auto-upload="false"
                :on-change="uploadImg"
                :show-file-list="false"
                action=""
            >
              <el-button size="mini" type="primary"
              > 更换头像
              </el-button>
            </el-upload>
          </el-row>
          <br>
          <el-row>
            <el-button circle icon="el-icon-plus" size="mini"
                       @click="changeScale(1)"></el-button>
            <el-button circle icon="el-icon-minus" size="mini"
                       @click="changeScale(-1)"></el-button>
            <el-button circle icon="el-icon-download" size="mini"
                       @click="down('blob')"></el-button>
            <el-button circle icon="el-icon-refresh-left" size="mini"
                       @click="rotateLeft"></el-button>
            <el-button circle icon="el-icon-refresh-right" size="mini"
                       @click="rotateRight"></el-button>
          </el-row>
        </div>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editAvatarDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveEditAvatar">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import {VueCropper} from "vue-cropper";

export default {
  name: "setAvatar",
  components: {VueCropper},
  data() {
    return {
      // avatarURL: require("@/assets/logo.jpg"),
      avatarURL: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      editAvatarDialog: false,
      previews: {},
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 剪切后的图片质量（0.1-1）
        full: true, // 输出原图比例截图 props名full
        outputType: 'png', // 裁剪生成额图片的格式
        canMove: true,  // 能否拖动图片
        original: false,  // 上传图片是否显示原始宽高
        canMoveBox: true,  // 能否拖动截图框
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 150,
        autoCropHeight: 150,
        fixedBox: true // 截图框固定大小
      },
    }
  },
  methods: {
    editAvatar() {
      this.editAvatarDialog = true
      this.option.img = this.avatarURL
    },
    // 保存头像修改
    saveEditAvatar() {
      this.editAvatarDialog = false
      this.finish('blob')
    },
// 放大/缩小
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
// 左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
// 右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
// 保存上传图片
    finish(type) {
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          this.avatarURL = window.URL.createObjectURL(data)
          console.log("this.avatarURL", this.avatarURL)
          //访问接口保存到数据库写这儿!
          console.log({data})
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          //访问接口保存到数据库写这儿!
          console.log("data", data)
        })
      }
    },
// 实时预览函数
    realTime(data) {
      this.previews = data
    },
// 下载图片
    down(type) {
      let aLink = document.createElement('a')
      aLink.download = 'author-img'
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          aLink.href = window.URL.createObjectURL(data)
          aLink.click()
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          aLink.href = data;
          aLink.click()
        })
      }
    },
// 更换头像--上传本地图片
    uploadImg(file) {
      console.log({file})
      let _this = this;
      let reader = new FileReader();
      reader.onload = (e) => {
        console.log("e.target.result", e.target)
        let data;
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        _this.option.img = data
      }
      // 转化为base64
      // reader.readAsDataURL(file.raw)
      // 转化为blob
      reader.readAsArrayBuffer(file.raw);
    },
  }
}
</script>

<style scoped>
.previewBox {
  text-align: center;
  margin-left: 60px;
}

.preview {
  width: 150px;
  height: 150px;
  margin: 0px auto 20px auto;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-color: #ccc;
  overflow: hidden;
}

.cropper {
  width: 260px;
  height: 260px;
}
</style>